// 画布上的元素类型
export interface canvasPageType {
  id: string
  canvasWidth: number
  canvasHeight: number
  styleDataList: publicDataType[]
}
// 控件上的元素类型
export interface controlType {
  type: 'Font' | 'Rect' | 'Img'
  icon: string
  name: string
}

// 渐变色和颜色位置的对象类型
interface gradualColor {
  color: string
  step: number
}

// 填充样式或镂空样式的类型
export interface fillStyleType {
  type: 'color' | 'linearGradient' | 'radialGradient' | 'img'
  color?: string
  gradient?: {
    x0: number
    y0: number
    r0: number
    x1: number
    y1: number
    r1: number
  }
  gradualColor?: gradualColor[]
  url?: string
  imgMode?: string
  width?: number
  height?: number
}
// 描边样式的类型
export interface strokeStyleType {
  type: 'color' | 'linearGradient' | 'radialGradient' | 'img'
  color?: string
  lineWidth: number
  mode: 'inside' | 'center' | 'outside'
  gradient?: {
    x0: number
    y0: number
    r0: number
    x1: number
    y1: number
    r1: number
  }
  gradualColor?: gradualColor[]
  img?: string
  repeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'
  width?: number
  height?: number
}

/**
 * 文字组件独有的属性
 */
export interface fontDataType {
  text?: string
  fontStyle?: string
  fontWeight?: number
  fontSize?: number
  fontFamily?: string
}
/**
 * 矩形组件独有的属性
 */
export interface rectDataType {}
// 图片组件独有的属性
export interface imgDataType {
  imgUrl?: string
  sx?: number
  sy?: number
  swidth?: number
  sheight?: number
}

// 元素的样式表单类型
export interface publicDataType
  extends fontDataType,
    rectDataType,
    imgDataType {
  /**
   * 所有canvas组件公共的属性
   */
  type?: 'Font' | 'Rect'
  id: string
  x: number
  y: number
  width?: number
  height?: number
  fill?: fillStyleType
  stroke?: strokeStyleType
  cornerRadius?: number | number[]
}
// canvas文字表单参数的类型
